<template>
	<view class="map-container">
		<view id="map" class="map" :style="{ width: '100%', height: '100vh' }"></view>
        
	</view>
</template>




<script module="echarts" lang="renderjs">
	export default {
		data() {
			return {
				lineArrs: [],
			};
		},

		mounted() {
			
		// 		this.lineArrs = uni.getStorageSync('lineArrs')
		
			if (window.AMap) {
				// 观测更新的数据在 view 层可以直接访问到
				this.initAmap();
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script');
				// const scripts = document.createElement('script');
				// const scripta = document.createElement('script');
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = `https://webapi.amap.com/maps?v=2.0&key=8a090a0b5a1cf1db451e69fa97981dbc&plugin=AMap.3DTilesLayer`; //您申请的key值
				// scripts.src = `https://a.amap.com/jsapi_demos/static/data3d/lib/three.117.js`;
				// scripta.src = `https://a.amap.com/jsapi_demos/static/data3d/lib/GLTFLoader.117.min.js`;
				
				// script.src = `https://webapi.amap.com/maps?v=1.4.15&key=133e941c933f7e000650205af461ab7f`; //您申请的key值
				//script标签的onload事件都是在外部js文件被加载完成并执行完成后才被触发的
				
				// scripts.onload = () => {
					
					
				// }
				// scripta.onload = () => {
					
					
				// }
				script.onload = () => {
					
					this.initAmap();
				}
				document.head.appendChild(script);
				// document.head.appendChild(scripta);
				// document.head.appendChild(scripts);
			}
		},

		methods: {

			initAmap() {
               
				
				const map = new AMap.Map('map', {
					resizeEnable: true,
					viewMode: '3D',
					center: [121.502325, 31.238165],
					pitch: 90,
					rotation: -50,
					zoom: 16,
					mapStyle: 'amap://styles/darkblue', // 加载自定义样式
					features: ['bg', 'road'],
				})

				const marker = new AMap.Marker({
					map: map,
					url: 'https://a.amap.com/jsapi_demos/static/data3d/single.json', // 3d Tiles 入口文件
					style: {
					  light: {
					    color: 'rgb(44,59,75)', // 设置光照颜色
					    intensity: 2, // 设置光照强度
					  },
					},
				});

			
				marker.on('moving', function(e) {
					passedPolyline.setPath(e.passedPath);
				});

				map.setFitView();

				this.marker = marker;
			},
			startAnimation() {
				const marker = this.marker;
				marker.moveAlong(this.lineArrs, 10);
			},
			pauseAnimation() {
				const marker = this.marker;
				marker.pauseMove();
			},
			resumeAnimation() {
				const marker = this.marker;
				marker.resumeMove();
			},
			stopAnimation() {
				const marker = this.marker;
				marker.stopMove();
			}
		},
	};
</script>

<style lang="scss" scoped>
	//高德地图-logo隐藏
	// /deep/.amap-logo {
	//   display: none;
	//   opacity: 0 !important;
	// }
	//高德地图-版权隐藏
	.amap-copyright {
		opacity: 0;
	}

	.input-card {
		position: fixed;
		bottom: 7%;
		width: 100%;
	}

	.input-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
	}
</style>